import { useEffect, useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useAppStore } from '@/stores/appStore';

export function Stage0Intro() {
  const { experienceMode } = useAppStore();
  const [currentStep, setCurrentStep] = useState(0);
  
  const steps = [
    {
      title: "🎩 零知识证明的魔术",
      subtitle: "在不透露秘密的情况下证明知识",
      content: "想象一个场景：小明知道一个秘密数字，他想向小红证明自己确实知道这个秘密，但又不能把秘密告诉小红。"
    },
    {
      title: "🔐 三个核心特性",
      subtitle: "零知识证明的神奇之处",
      content: "完整性 - 如果你真的知道秘密，验证一定会通过\n可靠性 - 如果你不知道秘密，无法伪造有效证明\n零知识性 - 整个过程中，秘密从未暴露"
    },
    {
      title: "⚡ 实际应用场景",
      subtitle: "隐私保护的数字世界",
      content: "身份验证、资产证明、隐私计算、区块链隐私交易等场景中，保护用户隐私的同时证明数据有效性。"
    }
  ];
  
  useEffect(() => {
    if (!experienceMode.autoplay) return;
    
    const timer = setInterval(() => {
      setCurrentStep((prev) => (prev + 1) % steps.length);
    }, 3000);
    
    return () => clearInterval(timer);
  }, [experienceMode.autoplay, steps.length]);
  
  return (
    <div className="stage-container">
      <div className="max-w-4xl mx-auto text-center">
        {/* Main content */}
        <AnimatePresence mode="wait">
          <motion.div
            key={currentStep}
            initial={{ opacity: 0, y: 50 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -50 }}
            transition={{ duration: 0.8, ease: "easeOut" }}
            className="mb-12"
          >
            {/* Title */}
            <motion.h1
              className="text-6xl font-bold gradient-text mb-6"
              initial={{ scale: 0.8 }}
              animate={{ scale: 1 }}
              transition={{ delay: 0.2, type: "spring", stiffness: 200 }}
            >
              {steps[currentStep].title}
            </motion.h1>
            
            {/* Subtitle */}
            <motion.h2
              className="text-2xl text-gray-300 mb-8"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: 0.4 }}
            >
              {steps[currentStep].subtitle}
            </motion.h2>
            
            {/* Content */}
            <motion.div
              className="text-lg text-gray-200 leading-relaxed max-w-2xl mx-auto"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: 0.6 }}
            >
              {steps[currentStep].content.split('\n').map((line, index) => (
                <p key={index} className="mb-4">
                  {line}
                </p>
              ))}
            </motion.div>
          </motion.div>
        </AnimatePresence>
        
        {/* Interactive elements */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 1, duration: 0.6 }}
          className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12"
        >
          {[
            { 
              icon: "🔒", 
              title: "完整性", 
              desc: "真实证明必定通过",
              color: "from-quantum-blue to-blue-600"
            },
            { 
              icon: "🛡️", 
              title: "可靠性", 
              desc: "虚假证明无法通过",
              color: "from-crypto-green to-green-600"
            },
            { 
              icon: "👁️", 
              title: "零知识性", 
              desc: "秘密永不泄露",
              color: "from-proof-purple to-purple-600"
            }
          ].map((feature, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 1.2 + index * 0.2 }}
              whileHover={{ 
                scale: 1.05, 
                boxShadow: "0 20px 40px rgba(0,0,0,0.3)" 
              }}
              className="floating-card"
            >
              <div className={`w-16 h-16 mx-auto mb-4 bg-gradient-to-br ${feature.color} rounded-full flex items-center justify-center text-2xl`}>
                {feature.icon}
              </div>
              <h3 className="text-xl font-semibold text-white mb-2">
                {feature.title}
              </h3>
              <p className="text-gray-300">
                {feature.desc}
              </p>
            </motion.div>
          ))}
        </motion.div>
        
        {/* Progress indicators */}
        <div className="flex justify-center space-x-3 mb-8">
          {steps.map((_, index) => (
            <motion.button
              key={index}
              onClick={() => setCurrentStep(index)}
              className={`w-3 h-3 rounded-full transition-all duration-300 ${
                index === currentStep 
                  ? 'bg-quantum-blue scale-125' 
                  : 'bg-gray-600 hover:bg-gray-500'
              }`}
              whileHover={{ scale: 1.2 }}
              whileTap={{ scale: 0.9 }}
            />
          ))}
        </div>
        
        {/* Call to action */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 1.8 }}
        >
          <p className="text-gray-400 mb-6">
            准备好体验零知识证明的魔法了吗？
          </p>
          <motion.div
            className="inline-flex items-center space-x-2 text-quantum-blue"
            animate={{ y: [0, -10, 0] }}
            transition={{ duration: 2, repeat: Infinity }}
          >
            <span className="text-lg">👇</span>
            <span className="font-semibold">点击开始体验</span>
          </motion.div>
        </motion.div>
        
        {/* Floating particles for this stage */}
        <div className="absolute inset-0 pointer-events-none">
          {Array.from({ length: 20 }, (_, i) => (
            <motion.div
              key={i}
              className="absolute w-2 h-2 bg-quantum-blue/30 rounded-full"
              style={{
                left: `${Math.random() * 100}%`,
                top: `${Math.random() * 100}%`,
              }}
              animate={{
                y: [0, -20, 0],
                opacity: [0.3, 0.7, 0.3],
                scale: [1, 1.2, 1],
              }}
              transition={{
                duration: 3 + Math.random() * 2,
                repeat: Infinity,
                delay: Math.random() * 2,
              }}
            />
          ))}
        </div>
      </div>
    </div>
  );
}